<template>
  <div class="Company-dynamics" style="height: 100%">
    <!-- 左侧 -->
    <div class="model-left">
      <div class="block">
        <a href=""></a>
        <el-carousel
          trigger="click"
          height="300px"
          style="padding-left: 5px; padding-bottom: 5px"
          ><a href=""
            ><el-carousel-item v-for="item in 4" :key="item">
              <h3 class="small">{{ item }}</h3>
            </el-carousel-item></a
          >
        </el-carousel>
      </div>
      <tr>
        <td>
          <div align="center" style="overflow: hidden; text-overflow: ellipsis">
            <h2 class="CompanyDynamicsH2" style="text-align: center"><a href="">大奉打更人</a></h2>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <p class="intro">
            《大奉打更人》1-12册实体书已在天猫、京东、当当全平台发售。
            这个世界，有儒；有道；有佛；有妖；有术士。
            警校毕业的许七安幽幽醒来，发现自己身处牢狱之中，三日后流放边陲.....
            他起初的目的只是自保，顺便在这个没有人权的社会里当个富家翁悠闲度日。
            ...... 多年后，许七安回首前尘，身后是早已逝去的敌人，以及累累白骨。
            滚滚长江东逝水，浪花淘尽英雄，是非成败转头空。
            青山依旧在，几度夕阳红。
          </p>
        </td>
      </tr>
    </div>
    <!-- 右侧 -->
    <div class="model-right">
      <ul>
        <li><span>Data</span><a href="" title="我就是不按套路出牌">我就是不按套路出牌</a></li>
        <li><span>Data</span><a href="" title="这个人仙太过正经">这个人仙太过正经</a></li>
        <li><span>Data</span><a href="" title="稳住别浪">稳住别浪</a></li>
        <li><span>Data</span><a href="" title="太乙">太乙</a></li>
        <li><span>Data</span><a href="" title="全职艺术家">全职艺术家</a></li>
        <li><span>Data</span><a href="" title="大梦主">大梦主</a></li>
        <li><span>Data</span><a href="" title="轮回乐园">轮回乐园</a></li>
        <li><span>Data</span><a href="" title="大梦主">黎明之剑</a></li>
        <li><span>Data</span><a href="" title="大梦主">大主宰</a></li>
        <li><span>Data</span><a href="" title="大梦主">完美世界</a></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {};
  },
  methods: {},
};
</script>


<style>
p.intro {
  height: 118px;
}
CompanyDynamicsH2 {
  display: flex;
  justify-content: center;
}

/* 左侧宽度 */
.model-left {
  width: 300px;
  float: left;
}
/* 右侧宽度 */
.model-right {
  width: 290px;
  float: right;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

/* 右侧li span靠右漂浮 */
.model-right ul li span {
  font-size: 13px;
  color: #000;
  float: right;
}


.model-right ul li a {
    font-size: 14px;
    color: #222;
    line-height: 25px;
}
.model-right ul li {
    border-bottom: 1px dashed #dddddd;
    height: 36px;
    line-height: 36px;
    padding-top: 0px;
    background: url(../img/list1.jpg) 2px center no-repeat;
    padding-left: 15px;
    padding-right: 5px;
}
</style>